<!--  -->
<template>

  <!-- 你弄着进来干吗 只要样式 不用别的 。。。哦  -->
  <div class="category-container">
    <el-row>
      <el-col :span="2"><span>分类</span></el-col>
      <el-col :span="2"><span>全部</span></el-col>
      <el-col
        :span="20"
        class="content"
      >
        <ul>
          <li
            v-for="item of types"
            :key="item.type"
          ><span>{{item.type}}<i class="el-icon-caret-bottom"></i></span>
            <dl>
              <dt>{{item.type}}</dt>
              <dd>全部</dd>
              <dd
                v-for="(m,index) in item.module"
                :key='index'
              >{{m}}</dd>

            </dl>
          </li>
        </ul>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2"><span>分类</span></el-col>
      <el-col :span="2"><span>全部</span></el-col>
      <el-col
        :span="20"
        class="content"
      >
        <ul class='no-border'>
          <li
            v-for="item of areas"
            :key="item.type"
          ><span>{{item.type}}<i class="el-icon-caret-bottom"></i></span>
            <dl>
              <dt>{{item.type}}</dt>
              <dd>全部</dd>
              <dd
                v-for="(a,index2) in item.module"
                :key='index2'
              >{{a}}</dd>

            </dl>
          </li>
        </ul>
      </el-col>
    </el-row>

  </div>

</template>

<script>
export default {
  props: {
    types: {
      type: Array,
      default: []
    },
    areas: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  },

  components: {},

  computed: {},

  methods: {}
};
</script>
<style lang='scss' scoped>
// kaishi nide biaoyan
.category-container {
  position: relative;
  margin-top: 10px;
  padding: 15px 20px 0;
  background: #ffffff;
  // border: 1px solid #e5e5e5;
  border: 1px solid #e5e5e5;
  line-height: 20px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
  // height: 500px;
  .content {
    padding-bottom: 10px;
    ul {
      display: flex;
      flex-flow: row wrap;
      border-bottom: 1px solid #eee;

      li {
        width: 16.6%;
        list-style: none;
        padding-bottom: 10px;
        position: relative;
        dl {
          position: absolute;
          display: none;
          top: 30px;
          left: -12px;
          width: 500px;
          background-color: #fff;
          box-sizing: border-box;
          padding: 10px;
          line-height: 2;
          border-radius: 4px;
          border: 1px solid #e5e5e5;
          z-index: 999;
          dt {
            color: #ccc;
            font-size: 16px;
          }
          dd {
            float: left;
            width: 25%;
            line-height: 1.5;
            font-size: 12px;
            font-weight: 400;
          }
        }
        &:hover {
          dl {
            display: block;
          }
        }
      }
    }
    .no-border {
      border-bottom: none;
    }
  }
}
</style>
